<template>
  <el-container>
    <el-header>Header</el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-active="activeIndex" text-color="#fff" background-color="#000000">
          <NestedMenuItem v-for="item in menuRenders" :key="item.path" :item="item">
          </NestedMenuItem>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import { useRouter, createRouter, createWebHistory, useRoute } from 'vue-router'
import { ref, computed, reactive } from 'vue'
import NestedMenuItem from './components/NestedMenuItem.vue'
import api from './api'

export default {
  name: 'MyMenu',
  components: {
    NestedMenuItem,
  },
  setup() {

    const router = useRouter()
    const route = useRoute()
    console.log('app vue')
    var routesConfig = JSON.parse(localStorage.getItem('routesConfig'))

    const menuItems = ref(routesConfig)
    console.log('routesConfig', routesConfig)
    const activeIndex = computed(() => {
      // console.log('lll', route.path)
      const item = menuItems.value.find(item => item.path === route.path);
      return item ? item.path : '/home'; // 默认激活第一个菜单项
    });

    var menuRenders = reactive();
    const formatMenuData = () => {
      // var
      //menu0 
      var menus0 = routesConfig.filter(x => x.ParentId == 0)
      console.log('menus0', menus0)
      menuRenders = reactive(getMenuChildren(menus0))

      console.log('menuRenders', menuRenders)
    }

    const getMenuChildren = (menuItems) => {
      // if (menuItems.length == 0) {
      //   return menuItems
      // }
      menuItems.forEach(item => {
        item.children = routesConfig.filter(x => x.ParentId == item.Id)
        getMenuChildren(item.children)
      })

      return menuItems
    }

    formatMenuData()
    return {
      menuRenders,
      activeIndex,
      router,
      menuItems
    }
  }
}


</script>


<style>
html,
body {
  height: 100%;
  margin: 0;
}

.el-header {
  background: #000000;
  box-shadow: 4px 2px 4px 1px rgb(61 65 91 / 88%);
  z-index: 3;

}

#app {
  height: 100%;
}

#app .el-container {
  height: inherit;
}


.el-menu {
  height: 100%;
}
</style>